<template>
  <div class="homePageWrap">
    <div>
      <div class="cardWrap">
        <div class="cardInner" @click="selectTab(statis.reportLocationCount,1)"
            style="background:linear-gradient(139deg,rgba(123,163,253,1),rgba(95,74,251,1));">
          <div class="iconcardWrap"><img src="./imgs/card1.png" height="85" width="100"/></div>
          <div class="textWrapCard">
            <div class="textCardInner">{{statis.reportLocationCount}}辆</div>
            <div class="textCardSmall">实时车辆数</div>
          </div>
        </div>
      </div>
      <div class="cardWrap">
        <div class="cardInner" @click="selectTab(statis.illegalParkCount,2)"
             style="background:linear-gradient(139deg,rgba(255,171,81,1),rgba(252,103,155,1));">
          <div class="iconcardWrap">
            <img src="./imgs/card2.png" height="85" width="100"/>
          </div>
          <div class="textWrapCard">
            <div class="textCardInner">{{statis.illegalParkCount}}辆</div>
            <div class="textCardSmall">违停车辆数</div>
          </div>
        </div>
      </div>
      <div class="cardWrap">
        <div class="cardInner" @click="selectTab(statis.illegalDeliveryCount,3)"
             style="background:linear-gradient(139deg,rgba(87,197,172,1),rgba(60,138,201,1));">
          <div class="iconcardWrap">
            <img src="./imgs/jiangbike.png" height="85" width="86"/>
          </div>
          <div class="textWrapCard">
            <div class="textCardInner">{{statis.illegalDeliveryCount}}辆</div>
            <div class="textCardSmall">违投车辆数</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageContentInner">
      <el-row style="width: 100%;height: 100%;">
        <el-col :span="15" style="height: 100%;overflow: hidden;">
          <div class="imgContentWrap">
            <div style="width: 100%; height: 100%;">
              <div class="imgMapWrap">
                <div style="height: 100%;width: 100%;">
                  <div class="echartsBarWrap">
                    <div class="echartsBarTitle">
                      <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                        <div slot="content">统计当前各单车企业在平台登记投放正常使用的车辆编号数量</div>
                        <span style="font-weight: bold;">实时车辆数</span>
                      </el-tooltip>
                    </div>
                    <el-row class="echartsBarInner" v-loading="peiLoading">
                      <el-col v-for="(item,index) in bicycleList" :key="index" :span="24/bicycleList.length" style="height: 100%;text-align: center;">
                        <div style="height: 90%;position: relative;">
                          <div class="echartsBarCenter">
                            <div class="echartsBarCount">{{item.statisCount}}</div>
                            <span class="echartsBarPer">占比{{toDecimal(item.statisCount / total * 100)}}%</span>
                          </div>
                          <enterpriseEcharts :dataType="dataType" :baseData="item" :totalRegisCount="total" :echartsKey="item.enterpriseNo"></enterpriseEcharts>
                        </div>
                        <div class="echartsBarBot">{{item.enterpriseName}}</div>
                      </el-col>
                    </el-row>
                  </div>
                  <div style="height: 50%;">
                    <div style="height: 100%;width: 100%; border-radius: 5px;background-color: white;;position: relative;">
                      <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                        <div slot="content">统计七天各企业用户骑行订单数</div>
                        <div style="position:absolute;left:15px;top: 15px;color:#3975FE;font-size: 14px;font-weight: bold;z-index: 1000;">
                          实时车辆数日趋势
                        </div>
                      </el-tooltip>
                      <lineChart :dataType="dataType"></lineChart>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9" style="height: 100%;">
          <div class="rightInfoWrap">
            <div style="height: 50%;width: 100%;border-radius: 5px;background-color: white;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计七天违停案件数量</div>
                <div style="position:absolute;left:15px;top: 15px;color:#3975FE;font-size: 14px;font-weight: bold;z-index: 1000;">
                  违停案件趋势图
                </div>
              </el-tooltip>
              <illegalParkChart></illegalParkChart>
            </div>
            <div style="height: 50%;width: 100%;border-radius: 5px;background-color: white;margin-top: 10px;position: relative;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计七天各企业用户骑行订单数</div>
                <div style="position:absolute;left:15px;top: 15px;color:#3975FE;font-size: 14px;font-weight: bold;z-index: 1000;">
                  骑行车辆订单数
                </div>
              </el-tooltip>
              <orderChart></orderChart>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import enterpriseEcharts from './homeMap/enterpriseEcharts.vue'
  import lineChart from './homeMap/lineChart.vue'
  import illegalParkChart from './homeMap/illegalParkChart.vue'
  import orderChart from './homeMap/orderChart.vue'


  export default{
    data(){
      return {
        statis: {
          reportLocationCount:0,//实时车辆数
          illegalParkCount:0,//违停车辆数
          illegalDeliveryCount:0,//违投车辆数
        },
        dataType:1,
        total: 0,// 系统总量
        bicycleList: [],
        peiLoading:false
      }
    },
    components: {enterpriseEcharts, lineChart,illegalParkChart, orderChart},
    created(){
      this.getinitStatisInfo()
      this.bicycleCount()
    },
    mounted(){},

    methods: {
      // 获取全部数据
      getinitStatisInfo(){
        this.axios.get(process.env.API_HOST + 'index/initStatisCount', {}).then(response => {
          const result = response.data
          if (result.code === 200) {
            this.statis = result.result
            this.total = result.result.reportLocationCount
          }
        })
      },
      selectTab(total,dataType){
        this.total = total
        this.dataType = dataType
        this.bicycleCount()
      },
      // 查询各企业车辆总数
      bicycleCount(){
        this.peiLoading = true
        this.bicycleList = []
        this.axios.post(process.env.API_HOST + 'index/getEnterpriseBicyclePieChart', {dataType:this.dataType})
            .then(response => {
          const result = response.data
              this.peiLoading = false
          if (result.code === 200) {
            this.bicycleList=result.result
          }
        })
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .homePageWrap
    page()
    left 0px
    right 5px
    .cardWrap
      border-radius: 5px;
      height: 100px;
      width: 100%;
      float: left;
      width: 33%;
      padding: 0 5px;
      box-sizing: border-box;
      position: relative;
      .cardInner
        height: 100%;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0px 7px 13px 0px rgba(13, 13, 14, 0.15);
        cursor:pointer;
        &:hover
          box-shadow: 0px 7px 13px 0px rgba(57, 117, 254, 0.6);
        .iconcardWrap
          position absolute
          left 5px
          bottom 0px
        .iconfont
          font-size: 80px;
          color: white;
          opacity 0.4;
        .textWrapCard
          position: absolute;
          right: 35px;
          top: 0px;
          overflow: hidden;
          .textCardInner
            font-size: 29px;
            color: white;
            margin-top: 20px;
            text-align: right;
          .textCardSmall
            font-size: 14px;
            color: white;
            margin-top: 15px;
            text-align: right;
    .pageContentInner
      position absolute
      left 5px
      right 5px
      bottom 0px
      top 110px
      border-radius 5px
      .imgContentWrap
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        position: relative;
        .imgMapWrap
          background-color: white;
          border-radius: 5px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          text-align: center;
          .echartsBarWrap
            height: 50%;
            padding: 15px;
            box-sizing: border-box;
            .echartsBarTitle
              color: #3975FE;
              font-size: 14px;
              text-align: left;
              font-weight: bold;
            .echartsBarInner
              height: 100%;
              border-bottom: 1px dashed #d3d4d6;
              padding-bottom: 15px;
              box-sizing: border-box;
              .echartsBarBot
                text-align: center;
                font-weight: bold;
                font-size: 14px;
                color: grey;
              .echartsBarCenter
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                display: inline-block;
                text-align: center;
                height: 40px;
                .echartsBarCount
                  color: #484848;
                  font-size: 22px;
                  text-align: center;
                  font-weight: bold;
                .echartsBarPer
                  color: #787878;
                  text-align: center;
                  line-height: 30px;
          .imgMapInner
            margin-top: 12px;
            position: relative;
            height: 100%;
            .gradeClass
              position: absolute;
              right: 20px;
              top: 10px;
              color: #3975FE;
              line-height: 22px;
              font-size: 12px;
              font-weight: bold;
            .imgHomeWrap
              height: 87%;
              position: relative;
              display: inline-block;
              max-width 100%
              margin: 0 auto;
              .textSha
                text-shadow: 1px 1px 1px #140f41,-1px -1px 1px #140f41;
                /*text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;*/

              .imgMapSty
                height: 100%;
                max-width 100%
                display: inline-block;
              .areaListSty
                display: inline-block;
                font-size: 11px;
                color: white;
                line-height: 15px;
                position: absolute;
                cursor pointer;
            .companyInfoSty
              font-size: 14px;
              color: #3975FE;
              font-weight: bold;
              margin-left: 11px;
              margin-right: 15px;
              line-height: 24px;
              vertical-align: middle;
            .checkWrap
              .el-radio-button
                .el-radio-button__inner
                  border-radius 10px
                  padding 5px 15px
                  border: 1px solid #dcdfe6;
              .is-active
                .el-radio-button__inner
                  background-color: #3975FE
                  border-radius 10px
                  border-color #3975FE
      .rightInfoWrap
        overflow hidden
        height: 100%;
        margin-left 10px
        border-radius: 5px;
        position relative
        input:
        :-webkit-input-placeholder { /* WebKit browsers */
          color: white;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: white;
        }
        input:
        :-moz-placeholder { /* Mozilla Firefox 19+ */
          color: white;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: white;
        }

        .rightInfoheader
          box-shadow: 0px 7px 13px 0px rgba(13, 13, 14, 0.15);
          background-color: #3975FE;
          border-radius: 5px;
          height: 35px;
          line-height: 35px;
          color: white;
          font-weight: bold;
          font-size: 14px;
          position absolute;
          left 0;
          top 0;
          right 0;
          z-index 10
          padding-top 5px
          box-sizing border-box
        .el-input__suffix-inner
          display none
        .el-input--mini .el-input__inner
          background-color #3975FE
          color white
          border none
          padding 0 5px !important;
          text-align center !important
        .textSwipe
          width 100%
          text-align: center;
          line-height: 25px;
          color: #898A8A;
          font-size: 12px;
        .hoverSty:hover .textSwipe
          color #3975FE
</style>
